<template>
  <div>
    <div class="flex justify-center" style="margin: auto">
      <card-online-terminal ref="onlineTerminalCard" />
      <card-acitvity-terminal ref="activityTerminalCard" />
      <card-login-time />
    </div>
    <el-row :gutter="32" style="margin: 8px 20px">
      <el-col :lg="12" :md="24">
        <div class="my-card">
          <div class="my-card-header">
            <div class="flex items-center justify-between">
              <span>
                <span class="my-card-title">{{
                  $t('operator.login_time')
                }}</span>
              </span>
            </div>
          </div>
          <login-times-chart ref="loginTimesChart" />
        </div>
      </el-col>
      <el-col :lg="12" :md="24">
        <div class="my-card">
          <div class="my-card-header">
            <div class="flex items-center justify-between">
              <span>
                <span class="my-card-title">{{
                  $t('operator.acitve_devices')
                }}</span>
              </span>
              <svg-icon class=" text-xl cursor-pointer" icon-class="download" @click="downloadExcel"/>

            </div>
          </div>
          <activity-device-chart ref="ActivityDeviceChart" />
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="32" style="margin: 8px 20px">
      <el-col :lg="12" :md="24">
        <div class="my-card">
          <div class="my-card-header">
            <div class="flex items-center justify-between">
              <span>
                <span class="my-card-title">{{
                  $t('operator.new_activae_devices')
                }}</span>
              </span>
              <div>
                <chart-data-filter
                  ref="newActivateChartFilter"
                  :date-filter="true"
                  :model-filter="true"
                  @confirm="resetNewActivateChart"
                />
              </div>
            </div>
          </div>
          <new-activate-chart ref="NewActivateChart" />
        </div>
      </el-col>
      <el-col :lg="12" :md="24">
        <div class="my-card">
          <div class="my-card-header">
            <div class="flex items-center justify-between">
              <span>
                <span class="my-card-title">{{
                  $t('operator.application_download')
                }}</span>
              </span>

              <div>
                <chart-data-filter
                  ref="AppDownloadChartFilter"
                  :date-filter="true"
                  @confirm="resetAppDownloadChart"
                />
              </div>
            </div>
          </div>
          <app-download-chart ref="AppDownloadChart" />
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="32" style="margin: 8px 20px">
      <el-col :lg="12" :md="24">
        <div class="my-card">
          <div class="my-card-header">
            <div class="flex items-center justify-between">
              <span>
                <span class="my-card-title">{{
                    $t('operator.toms_version_distribution')
                  }}</span>
              </span>
            </div>
          </div>
          <toms-version-chart ref="AppDownloadChart" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ActivityDeviceChart from './overview/activity-device-chart.vue'
import AppDownloadChart from './overview/app-download-chart.vue'
import CardAcitvityTerminal from './overview/card-acitvity-terminal.vue'
import CardLoginTime from './overview/card-login-time.vue'

import cardOnlineTerminal from './overview/card-online-terminal.vue'
import LoginTimesChart from './overview/login-times-chart.vue'
import NewActivateChart from './overview/new-activate-chart.vue'
import TomsVersionChart from './overview/toms-version-chart.vue'
import ChartDataFilter from './overview/setting/chart-data-filter'

export default {
  components: {
    cardOnlineTerminal,
    LoginTimesChart,
    ChartDataFilter,
    NewActivateChart,
    AppDownloadChart,
    ActivityDeviceChart,
    CardLoginTime,
    CardAcitvityTerminal,
    TomsVersionChart
  },

  data() {
    return {
      tableData: [
        {
          model: 'N910',
          count: 109,
          max: 100,
          progress: 42
        },
        {
          model: 'N900',
          count: 74,
          max: 100,
          progress: 75
        },
        {
          model: 'CPOS X1',
          count: 559,
          max: 100,
          progress: 20
        }
      ]
    }
  },
  methods: {
    downloadExcel() {
      this.$refs.ActivityDeviceChart.exportActiveDevices()
    },
    init() {
      this.operator = JSON.parse(localStorage.getItem('operator-info'))
    },
    resetNewActivateChart(config) {
      this.$refs.NewActivateChart.initData(config)
    },
    resetAppDownloadChart(config) {
      this.$refs.AppDownloadChart.initData(config)
    }
  }
}
</script>

<style lang="scss" scoped>
.my-card {
  background: #ffffff;
  border: 1px solid #eef0f7;
  box-shadow: 0px 0px 21px 0px rgba(19, 33, 68, 0.08);
  border-radius: 12px;
  margin-bottom: 16px;
  .my-card-header {
    padding: 32px 24px;
    border-bottom: solid 1px #eef0f7;
    .my-card-title {
      color: #1e2022;
      font-size: 16px;
      font-weight: 600;
    }
  }

  .my-card-body {
    padding: 36px;
    padding-top: 0px;
  }
}
</style>
